<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" >
<head>
<meta charset="UTF-8">
<title th:text="${application.config.webName}+-后台"></title>
<div th:include="/common/layui"></div>
<div th:include="/common/jq"></div>
<script	src="/vue/vue.min.js"></script>

</head>

<style>
html,body{
	min-width: 1024px;
	 height:100%; 
	 overflow: hidden;
}
.layui-tab-item{
	overflow-x: scroll;
}
</style>



<body>
<div style="display: flex;display: -webkit-flex; flex-direction:column; height: 100%; ">
	<div style="height: 60px; width: 100%;">
		<div th:include="/common/managetop">
		</div>
	</div>


	<div style=" flex:1;-webkit-flex:1;">
		<div th:include="/common/left_menu">
		</div>

		<div id="main_scroll" style="flex:1;-webkit-flex:1;padding-left: 200px;">
			<div class="layui-tab layui-tab-brief" lay-allowclose="true"  style="margin: 0;"  lay-filter="layer_tab">
				<ul class="layui-tab-title">
				</ul>
				<div class="layui-tab-content" style="padding:0px;">
				
				
				<!--shiro标签来控制页面元素的显示 <shiro:hasPermission name="用户管理">　
				     如果当前Subject有权限  用户管理
			　　</shiro:hasPermission>
				
				<shiro:lacksPermission name="用户管理">　
					  如果当前Subject  没有权限   用户管理
				</shiro:lacksPermission> -->
				</div>
			</div>
		</div>
	</div>
</div>


</body>
<script>
	layui.use([ 'laydate', 'laypage', 'layer', 'table', 'carousel',
			'upload', 'element' ], function() {
		var laydate = layui.laydate //日期
		, laypage = layui.laypage //分页
		,layer = layui.layer //弹层
		, table = layui.table //表格
		, carousel = layui.carousel //轮播
		, upload = layui.upload //上传
		, element = layui.element; //元素操作
		
		//监听导航点击
		element.on('nav(left_menu)', function(elem){
			// $(this)
			elem = $(this).parent();
			
		    var id = $(elem).attr("id");
			var url = $(elem).attr("url");
			var text = $(elem).attr("dd_text");
			var type = $(elem).attr("type");
			
			console.log(id);
			console.log(url);
			console.log(text);
			console.log(type);
			var content = "<iframe frameborder=0 scrolling='auto' style='width:100%;height:100%' src='"+url+"'></iframe>";
			switch(type){
			case '0':
				addTab(id,text,content);
				break;
			case '1':
				window.open(url);
				break;
			case '2':
				//弹出layer窗口
				layer.open({
					type: 2,
					offset: ['300px','200px'],
					title: text,
					shade: 0.8,
					area: ['500px','600px'],
					content: url //iframe的url
				});
				break;
			}
			
		  });
		
	});
</script>
<script>

	//定义在外面
	var table;
	var element;
	layui.use([ 'laydate', 'laypage', 'layer','form', 'table', 'carousel',
		'upload', 'element' ], function() {
		table = layui.table;
		element = layui.element; //元素操作
	});

	//这个值是由  manage_top.jsp里面的一个显示隐藏的侧边的方法控制
	var left_width = 200 ;

	//可以从子页面传来个 关闭  由我关闭
	function delete_tab_id(id){
		element.tabDelete('layer_tab', id); //
	}

	$(function(){
		init_tab_height();
		window.onresize = function(){
			init_tab_height();
		}
	});


	//遍历选项卡，存在true  不存在false
	function for_tab(id){
		add_flag = false;
		$(".layui-tab-title li").each(function(){
			var lay_id = $(this).attr("lay-id");
			console.log(lay_id);
			if(lay_id){
				if(lay_id==id){
					add_flag = true;
				}
			}
		});
		return add_flag;
	}

	function init_tab_height(){
		var body_width = document.body.offsetWidth;
		layui_tab_item_width = (body_width-left_width);
		console.log("layui_tab_item的宽是:"+layui_tab_item_width);

		//计算layui-tab-item 需要 设置多少的高 顶部的60  layui-tab-title=41
		var body_height = document.body.offsetHeight;
		layui_tab_item_height = (body_height-60-41);
		$(".layui-tab-item").css("height",layui_tab_item_height+"px");
		console.log("layui_tab_item的高是:"+layui_tab_item_height);
	}

	function addTab(id,title,content){
		//遍历tab 看看这个id是否存在  如果存在直接切换
		var s = for_tab(id);
		if(s){
			element.tabChange('layer_tab', id); //切换到 用户点的
			init_tab_height();
		}else{
			//添加
			element.tabAdd('layer_tab', {
				title: title
				,content: content
				,id: id
			});
			element.tabChange('layer_tab', id); //切换到 用户点的
			init_tab_height();
		}
	}
</script>

</html>